<template>
	<div class="article">
		<!-- 1.title -->
		<div class="search-top">
			<p>文章管理</p>
			<el-button type="primary" 
			@click="drawer = true"
			>
				添加文章
			</el-button>
		</div>


		<!-- 2.文章搜索 -->
		<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
			<!-- 文章分类 -->
			<el-form-item label="文章分类">
				<el-select
					v-model="searchFrom.categortId"
					placeholder="请选择"
					clearable
				>
				<!-- 发送数据到searchFrom表单 -->
					<el-option :label="item.name" v-for="item in cateGoryName" :key="item.id" :value="item.id" />
					
				</el-select>
			</el-form-item>
			<!-- 发布状态 -->
			<el-form-item label="发布状态">
				<el-select
					v-model="searchFrom.state"
					placeholder="请选择"
					clearable
				>
					<el-option label="草稿" value="草稿"/>
					<el-option label="已发布"  value="已发布"/>
				</el-select>
			</el-form-item>
			<!-- 文章按钮 -->
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button  @click="refrom">重置</el-button>
			</el-form-item>
			
		</el-form>
		<!-- 3.文章列表 -->
		<el-table :data="articleForm" style="width: 100%">

			<el-table-column label="文章标题" width="320">
				<template #default="scope">
					<el-tag>{{ scope.row.title }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="分类" width="320">
				<template #default="scope">
					<el-tag>{{ scope.row.createUser }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="状态" width="320">
				<template #default="scope">
					{{ scope.row.state }}
				</template>
			</el-table-column>

			<el-table-column label="发布时间" width="320">
				<template #default="scope">
					<div style="display: flex; align-items: center">
						<el-icon><timer /></el-icon>
						<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row.id, scope.row)">
						编辑
					</el-button>
					<el-button
						size="small"
						type="danger"
						@click="handleDelete(scope.row.id, scope.row)"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页条 -->
		<div class="demo-pagination-block">
			<el-pagination
				v-model:current-page="currentPage4"
				v-model:page-size="pageSize4"
				:page-sizes="[5, 10, 15, 20]"
				:disabled="disabled"
				:background="background"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageSizeSum"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>

	</div>

	<!-- 蒙版，幕布 -->
	<div class="mubu" v-show="mubu" @click="mubu = false,deleteDoading = false"></div>

	<!-- 删除文章对话框 -->
	<div class= "deleteDoading" v-show="deleteDoading">
		<h2>是否删除该文章</h2>
		<div>
			<button @click="deleteArticleByiId">确认</button>
			<button @click="deleteDoading = false,mubu = false,ElMessage('取消删除')">取消</button>
		</div>
	</div>

			<!-- 添加文章对话框 -->
		<el-drawer v-model="drawer" title="I am the title" :with-header="false">
			<span>添加文章功能暂时未实现</span>
		</el-drawer>

</template>

<script setup>
import {ref} from 'vue'
import {cateGoryListService} from '@/Api/cateGory.js'
import {articleFrom,deleteArticle} from '@/Api/article.js'
import { Timer } from '@element-plus/icons-vue'

import { ElMessage } from 'element-plus'

//添加文章对话框
const drawer = ref(false)

//4.对话框与蒙版
const mubu = ref(false)
const deleteDoading = ref(false)

//文章id
const articleId = ref()



// 1.关于条件搜索的表单
const searchFrom = ref({
	//页码
	page:'',
	//每页条目
	pageSize:'',
	categortId:'',//文章分类
	state:null//文章状态
})
//接收文章分类类型
const cateGoryName = ref()

//接收条件查询后的文章数据
const articleForm = ref()


// 2.获取分类的类型，就是获取文章分类的列表
const cateGoryForm = async () => {
	const {data:res} = await cateGoryListService()

	cateGoryName.value = res.data
}
cateGoryForm()

//3.条件请求api
const search = async () => {
	const {data:res} = await articleFrom(searchFrom.value)
	articleForm.value = res.data.items
	pageSizeSum.value =res.data.total

}
search()


//4.重置条件数据
const refrom = () => {
	/**两个条件清空，页码，每页条数清空，分页默认选中回到1 */
	searchFrom.value.categortId = ''
	searchFrom.value.state = null
	searchFrom.value.page = 1
	searchFrom.value.pageSize = 5
	currentPage4.value = 1
	//重置后立即刷新
	search()
}

//4.1编辑文章
const handleEdit = (id, row) => {

  console.log(id, row)
}
//4.2删除文章功能对话框
const handleDelete = (id, row) => {

	mubu.value = true
	deleteDoading.value = true
	articleId.value = id

}
//确认删除
const deleteArticleByiId = async () => {
	//获取需要删除的id
	await deleteArticle(articleId.value)

	ElMessage({
    message: '删除成功',
    type: 'success',
  })

	mubu.value = false
	deleteDoading.value = false
	search()

}


//3.分页数据往下
//前往第几页，默认为4，自己选
const currentPage4 = ref(1)
//默认展示条数（静态数据没必要管）
const pageSize4 = ref(5)
//总条目
const pageSizeSum = ref(0)
//左右两边小箭头的禁用
const background = ref(false)
//条目禁用,没有数据的时候可以使用
const disabled = ref(false)

//每页展示的条目数
const handleSizeChange = (val) => {
  searchFrom.value.pageSize = val
	search()
}
//页码
const handleCurrentChange = (val) => {
  searchFrom.value.page = val
	search()
}




</script>

<style lang="scss" scoped>
.article{
	box-sizing: border-box;
	height: 100%;
	padding: 20px;
	box-shadow: 1px 1px 12px #bba5a5;
	// title
	.search-top{
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	//条件搜索界面
	.el-table{
		margin-bottom: 30px;
	}

}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>